<template>
  <div id="project">
    <div class="header">
      <span class="_txt">项目列表</span>
      <span class="_icon" @click="goTo('/setting')">
        <i class="el-icon-more-outline"></i>
      </span>
    </div>
    <div class="controlList">
      <div class="_box">
        <ul class="layui-nav layui-nav-tree layui-bg-mycolor" lay-filter="test">
        <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
         
          <li class="layui-nav-item">
            <a href="javascript:;" @click="ob=false" style="text-align:center;">排行榜</a>
          </li> 
          <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;" @click="scr=0,ob=true">项目列表</a>
            <dl class="layui-nav-child">
              <dd><span @click="scr=1,ob=true">教育</span></dd>
              <dd><span @click="scr=2,ob=true">金融</span></dd>
              <dd><span @click="scr=3,ob=true">机械电子</span></dd>
              <dd><span @click="scr=4,ob=true">网络</span></dd>
              <dd><span @click="scr=5,ob=true">工程</span></dd>
              <dd><span @click="scr=6,ob=true">化工</span></dd>
              <dd><span @click="scr=7,ob=true">医疗</span></dd>
              <dd><span @click="scr=8,ob=true">生物</span></dd>
            </dl>
          </li>
        </ul>
      </div>
    </div>
    <div class="objList _l1" v-show="ob == false">
      <div class="_box">
        <ul>
          <li v-for="item in rankItems" :key="item.id">
            <div class="_cardBox" @click="goTo(item.toPath)">
              <span class="_logo">
                <img :src="item.logo" alt="">
              </span>
              <span class="_name">{{item.name.txt}}</span> 
              <span class="_team">{{item.name.team}}</span>
              <span class="_grade">{{item.grade}}</span>
              <span class="_tag">
                <ul>
                  <li class="" v-for="it in item.name.tag" :key="it.index">
                    {{it.txt}}
                  </li>
                </ul>
              </span> 
              <span class="_info">{{item.info}}</span>
            </div>
          </li>
        </ul>
        <div style="
            width:100%;
            height:200px;
      "></div>
      </div>
    </div>
    <div class="objList _l2" v-show="ob == true">
      <div class="_box">
        <ul>
          <li v-for="item in items" :key="item.id">
            <div class="_cardBox" @click="goTo(item.toPath)" v-show="screenList(item)">
              <span class="_logo">
                <img :src="item.logo" alt="">
              </span>
              <span class="_name">{{item.name.txt}}</span> 
              <span class="_team">{{item.name.team}}</span>
              <span class="_grade">{{item.grade}}</span>
              <span class="_tag">
                <ul>
                  <li class="" v-for="it in item.name.tag" :key="it.index">
                    {{it.txt}}
                  </li>
                </ul>  
              </span> 
              <span class="_info">{{item.info}}</span>
            </div>
          </li>
        </ul>
        <div style="
            width:100%;
            height:200px;
      "></div>
      </div>
    </div>
    <div class="_bg">
      <div class="_oval"></div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items:[
        
      ],
      rankItems:[
        
      ],

      ob:false,
      scr:0,
    }
  },
  mounted(){
    this.allotData();
  },
  computed: {
    getObjData(){
      return this.$store.getters.getObjData
    }
  },    
  methods:{
    goTo:function(Path){
      this.$router.replace(Path);
    },
    screenList(item){
      for(var i in item.name.tag){
        if(this.scr===0||this.scr===item.name.tag[i].id){
          return true
        }
      }return false
    },
    changList:function(){
      this.scr = 0;
      this.ob = true;
    },
    allotData(){
      this.items = this.getObjData[1];
      this.rankItems = this.getObjData[0];
    },
  }
}
</script>


<style scoped>
div,span{
  display: block;
}
span{
  text-align: center;
  display: block;
}

#project{
  height: 800px;
  width: 100%;
}
.header{
  position:fixed;
  z-index: 500;
  width: 100%;
  height: 50px;
  background: linear-gradient(to right,#ff6600    ,#ff3300);
  color: #fff;
}
.controlList{
  width:100px;
  height:750px;
  position:fixed;
  float: left;
  margin-left: 5px;
  top:55px;
}
.objList{
  top:50px;
  left:100px;
  width: 250px;
  height: 750px;
  margin: 0 auto;
  position: relative;
  float: left;
  margin: 0 10px;

  
}
.controlList ._box{
  width:100%;
}
.objList ._box{
  
  width: 100%;
  height: 100%;

}
/*header */
  .header ._txt{
    height:50px;
    text-align:left;
    font-weight: 600;
    font-size: 20px;
    width: 90%;
    margin: 0 auto auto 15px;
    position: absolute;
    line-height: 50px;
  }
  .header ._icon{
    height: 50px;
    width: 50px;
    position: absolute;
    right: 0;
    font-size:40px; 
    color:#666;
  }
/*control列表样式 */
  .controlList ._box{
      border-radius: 10px;
      overflow: hidden;
   }
  .controlList .layui-nav-tree{
    width: 100px;

  }
  .controlList .layui-bg-cyan{
    background: #c7000b;
  } 
  .controlList .layui-nav{
    background: #ff333d;
  }
/*obj列表样式 */
  ._cardBox{
    height: 100%;
    background:  #f5f5f5;
    border-radius:9px;
    z-index: -1;
    overflow: hidden;
  }
  .objList ._cardBox{
    width: 100%;
    height: 200px;
    margin:5px 0;
  }
  .objList ._logo{
    height: 60px;
    width: 60px;
    position: relative;
    float: left;
  }
  .objList ._logo img{
    width: 60px;
    height: 60px;
    object-fit: cover;
    position: relative;
  }
  .objList ._name{
    height: 30px;
    width: 70%;
    background: #ccc;
    text-align: left;
    position: relative;
    float: left;
    overflow: hidden;
  }
  .objList ._grade{
    height: 30px;
    width:70%;
    background: #ccc;
    position: relative;
    float: left;
    overflow: hidden;
  }
  .objList ._info{
    height: 80px;
    width: 100%;   /*适应手机端时许进行相对单位更改 */
    background: #ccc;
    float: left;
    position: relative;
    text-align: left;
    overflow: hidden;
  }
  .objList ._tag{
    width:100%;
    height: 30px;
    position: relative;
    float: left;
    overflow: hidden;
  }
  .objList ._tag ul{
    position: relative;
    width: 90%;
    margin: 0 auto;
  }
  .objList ._tag li{
    width: 40px;
    line-height: 30px;
    position: relative;
    float: left;
  }
  .objList ._team{
    width:70%;
    height:30px;
    position: relative;
    float: left;
    overflow: hidden;
  }
/* oval */
  ._bg{
    z-index: -5;
    position: fixed;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
  }
  ._oval{
    position:absolute;
    width: 140%;
    left:-20%;
    height: 30%;
      background: linear-gradient(to right,#ff6600    ,#ff3300);
    border-bottom-right-radius:50%; 
    border-bottom-left-radius:50%; 
    box-shadow: 0 1px 5px #666;
  }
</style>
